<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			body>div{
				display: flex;
			}
			.box{
				
				width: 300px;
				margin:20px 20px;
				display: none;
			}
			.show{
				display: block;
			}
			.max-box{
				background-color: red;
				
				width: 300px;
				height: 300px;
				display: flex;
				align-items: center;
			}
			.min-box{
				background-color: green;
				margin:0 auto;
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<button id="btn1">按钮一</button>
		<div>
			<div class="box">
				<div id="abox" class="max-box">
					<div class="min-box"></div>
				</div>
				<h3>移入移出次数：<span id="anum"></span></h3>
			</div>
		</div>
		
		
		
		
		<script src="js/jquery.3.6.3.js"></script>
		<script>
			
			let anum = 0;
			//悬停事件
			$("#abox").hover(function(){
				//第一个函数
				anum++;
				//鼠标移入做的事情
				$("#abox>.min-box").css("background-color","black");
				$("#anum").html(anum);
			},function(){
				//第二个函数
				$("#abox>.min-box").css("background-color","green");
			})
			
			// $("#btn1").click(function(){
			// 	//切换
			// 	$("#abox").toggle("slow");
			// });
			
			//切换类样式
			$("#btn1").click(function(){
				$(".box").toggleClass("show");
			})
		</script>
	</body>
</html>
